//由于webpack 是基于Node 进行构建,所以,webpack配置文件中,任何合法的node代码都是支持的
var path = require('path')

//当以命令行运行weback 或webpack-dev-server 的时候,工具会发行,我们并没有提供要打包的文件入口和出口文件,此时,
// 他会检查项目根目录中的配置文件,并读取这个文件,就拿到了导出的这个配置对象,然后根据这个对象,进行打包构建


//在内存中,根据指定的模板页面,生成一份内存中的首页,同时自动打包好的bundel注入到页面底部
var htmlWebPackPlugin = require('html-webpack-plugin')
//cnpm i html-webpack-plugin -D

const VueLoaderPlugin = require('vue-loader/lib/plugin');  //Vue Loader v15 现在需要配合一个 webpack 
//插件需要挂载plugins节点
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './src/main.js'), //入口文件
    output: {
        path: path.join(__dirname, './dist'), //输出路径
        filename: 'bundle.js'    // 指定输出文件的名称
    },
    plugins: [
        new htmlWebPackPlugin({
            //所有webpac 插件的配置节点
            template: path.join(__dirname, './src/index.html'), //指定模板文件路径
            filename: 'index.html'  //设置生成的内存页面的名称
        }),
        new VueLoaderPlugin()  //Vue Loader v15 现在需要配合一个 webpack 

    ],
    module:{ //配置所有第三方loader 模块的
        rules:[ //第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']}, //处理css文件loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //处理less文件loader
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, //处理scss文件loader
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=76&name=[hash:8]-[name].[ext]'}, //处理图片路径的loader
            // limit给定的值, 是图片的大小,单位是byte ,如果我们引用的图片.大于或等于给定limit值,则不会转化为base64格式的字符串
            // 如果拖小于给定的limit值,则被转换为base 的字符串
            //反了: 应该是大于图片的时候,转化为base, 等于或小于的时候才不转换
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}, //处理字体文件loader

            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}, // 这是配置Babel来转换高级的es语法
            {test:/\.vue$/,use:'vue-loader'} // 处理 .vue文件的loader
        ]
    },
    resolve:{
        alias:{ // 修改 vue 被导入时包的路径
            // "vue$": "vue/dist/vue.js"
        }
    }
}